<template>
    <div style="width: 100%;height: 100%;">
        <el-container  style="height: 100%;">
            <el-aside width="200px"  style="box-sizing: border-box; background-color: rgb(250, 251, 252);border-right: 1px solid rgb(235, 236, 240);border-left: 1px solid rgb(235, 236, 240);">

                <div style="display: flex;border-bottom: 1px solid black;">
                    <i style="margin-top: 24px;margin-left: 10px;" class="el-icon-s-promotion"></i>
                    <h3 style="margin-left: 10px;">邮箱管理</h3>
                </div>    
           
                <el-menu default-active="2" class="el-menu-vertical-demo" @select="handleSelect" @open="handleOpen" @close="handleClose" background-color="rgb(250, 251, 252)" active-text-color="black">
                
                    <el-menu-item index="1">
                        <i class="el-icon-edit"></i>
                        <span slot="title">写信</span>
                    </el-menu-item>
                    <el-menu-item index="2" >
                        <i class="el-icon-message"></i>
                        <span slot="title">收件箱</span>
                    </el-menu-item>
                    <el-menu-item index="3">
                        <i class="el-icon-star-on"></i>
                        <span slot="title">星标邮件</span>
                    </el-menu-item>
                    <el-menu-item index="4">
                        <i class="el-icon-takeaway-box"></i>
                        <span slot="title">草稿箱</span>
                    </el-menu-item>
                    <el-menu-item index="5">
                        <i class="el-icon-message"></i>
                        <span slot="title">已发送</span>
                    </el-menu-item>
                    <el-menu-item index="6">
                        <i class="el-icon-delete-solid"></i>
                        <span slot="title">已删除</span>
                    </el-menu-item>
                 
                </el-menu>
           </el-aside>  
           <el-container>
                    <el-main style="background-color: rgb(250, 251, 252);overflow: hidden;">
                        <div v-if="showA">

                        
                        <div style="display: flex;height: 40px;margin-top:-3px; justify-content: space-between;">
                            <div>
                                <span style="margin-right: 10px;font-size: 25px;font-weight: bold;">{{ title }}</span>
                                <span >(共有{{ count1 }}封邮件)</span>
                            </div>
                            <div style="margin-top: 10px;">
                                <input type="text" style="height: 25px;" placeholder="根据邮件名搜索">
                                <el-button type="primary" style="width: 60px;height: 30px;padding: 0px;">搜索</el-button>
                            </div>
                        </div>
                        <div style="margin-top: 10px;display: flex;">
                            <div class="delemail" style="cursor: default;background-color: rgb(235, 236, 240);width: 90px;height: 32px;text-align: center;padding: 0px;line-height: 32px;">删除邮件</div>
                            <div class="delemailA" style="cursor: default;margin-left: 10px;background-color: rgb(235, 236, 240);width: 90px;height: 32px;line-height: 32px;padding: 0px;text-align: center;">彻底删除</div>
                            <div class="xingbiao" style="cursor: default;margin-left: 10px;background-color: rgb(235, 236, 240);width: 150px;height: 32px;line-height: 32px;padding: 0px;text-align: center;">标记为星标邮件</div>
                        </div>
                        <el-table :data="tableData" border style="width: 100%;" :header-cell-style="{'background':'rgb(235, 236, 240)'}">
                            <el-table-column type="selection"  fixed="left" :selectable="checkSelectable" />
                            
                            <el-table-column fixed prop="ren" label="发件人" align="center" width="150px"></el-table-column>
                            <el-table-column prop="zhuti" label="主题" width="800px">
                                <template slot-scope="scope">
                                    <span @click="handleClick(scope.row.zhuti);drawer = true" style="cursor: pointer;">
                                        {{ scope.row.zhuti }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="time" label="时间" ></el-table-column>
                        </el-table>
                        <el-drawer :visible.sync="drawer" :with-header="false" size="50%">
                            <div style="margin-left: 30px;margin-top: 20px;">
                                <span style="font-size: 20px;font-weight: bold;">{{ email_title.data }}</span>
                                <div>发件人：{{ email_title.addresser }}</div>
                                <div>收件人：{{ email_title.recipients }}</div>
                                <div>时间：{{ email_title.time }}</div>
                                <div>附件：{{ email_title.attachment }}</div>
                            </div>
                            
                        </el-drawer>
                        </div>
                        <div v-if="showB" style="overflow: hidden;">
                            <div style="display: flex;align-items: center;;">
                                <el-button type="primary">发送</el-button>
                                <div class="cun" style="margin-left: 20px;cursor: default;">存稿箱</div>
                                <div class="close" style="margin-left: 20px;cursor: default;">关闭</div>
                            </div>
                            <div>
                                <div style="display: flex;margin-top: 40px;margin-bottom: 20px;">
                                    <div style="width: 80px;margin-top: 10px;">收件人</div>
                                    <el-input v-model="input" placeholder="请输入内容" style=""></el-input>
                                </div>
                                <div style="display: flex;">
                                    <div style="width: 80px;margin-top: 5px;">主题</div>
                                    <el-input v-model="input" placeholder="请输入内容"></el-input>
                                </div>
                                <div style="display: flex;margin-top: 10px;">
                                    <div style="margin-left: 75px;margin-right: 20px;">
                                        <i class="el-icon-paperclip"></i>
                                        <span>添加附件</span>
                                    </div>
                                    <div>
                                        <i class="el-icon-picture"></i>
                                        <span>添加图片</span>
                                    </div>
                                </div>
                                <div style="display: flex;margin-top: 20px;">
                                    <span>正文</span><tinymce  style="margin-left: 43px;" :width="1300" v-model="fuwen" :key="tinymceFlag"></tinymce>
                                </div>
                                <div style="display: flex;justify-content: flex-end;margin-top: 10px;">
                                    <el-button type="primary">发送</el-button>
                                </div>
                               
                                
                                
                                
                            </div>
                            
                        </div>
                    </el-main>
                    <el-footer style="height: 50px;border-top: 1px solid rgb(235, 236, 240);">
                        <div style="margin-bottom: 0px;display: flex;justify-content: flex-end;margin-top: 20px;">
                            <el-pagination background
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    :current-page="params.page"
                                    :page-sizes="arr"
                                    :page-size="params.size"
                                    layout="total, sizes, prev, pager, next, jumper"
                                    :total="count">
                            </el-pagination>
                        </div>
                    </el-footer>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import Tinymce from "@/components/Tinymce";

export default{
    components: { Tinymce },
    data(){
        return{
            tabPosition:'left',
            count1:10,
            //默认每页几条size page-size，page当前页current-page
            params:{name: '',page:1,size:5},
            //总记录数
            count:10,
            //每页几条
            arr:[1,3,5,7,9,10],
            tableData:[{
                ren:"中国移动",
                zhuti:"检查是否最近安装了任何新的依赖项或更新了现有的依赖项。查看它们的文档",
                time:"2021-05-05"
                },
                {
                    ren:"中国联通",
                    zhuti:"，了解是否有已知的问题或需要特别配置的地方。如果有疑问，考虑暂时移除新添加的依赖项，看看问题是否依然存在。",
                    time:"2021-05-05"
                }
            ],
            //邮件标题
            email_title:{
                data: "邮件标题",
                addresser: "发件人",
                recipients: "收件人",
                time: "时间",
                attachment: "附件",
            },
            title:"收件箱",
            showA:'true',
            showB:'false',
            fuwen:'',
            tinymceFlag: 1,
            drawer: false,
        }
    },
    methods:{
        handleSelect(value){
            console.log(value)
            switch(value){
                case "1":
                    this.title="写信"
                    this.showA = false
                    this.showB = true
                    break;
                case "2":
                    this.title="收件箱"
                    this.showA = true
                    this.showB = false
                    break;
                case "3":
                    this.title="星标邮件"
                    break;
                case "4":
                    this.title="草稿箱"
                    break;
                case "5":
                    this.title="已发送邮件";
                    break;
                case "6":
                    this.title="已删除";
                    break;
                default:
                    console.log("error")
            }
            
        },
        //每页条数改变时触发
        handleSizeChange(val){
            //后台发请求，请求多少条
            console.log(`每页${val}条`)
            this.index = val
            this.getLimit()
        },
        //当前页改变时触发
        handleCurrentChange(val){
            //给后台发请求
            console.log(`当前页${val}`)
            this.pagee = val
            this.getLimit()
        },
        getLimit(){
            const data = {
                pagee: this.pagee,
                index: this.index
            }
            console.log("当前第几页："+data.pagee+"，每页显示几条："+data.index)
            getLimit(data).then(res => {
                this.tableData = res.result
                this.newtable = this.tableData
                console.log(res)
            })
        },
        //主题内容
        handleClick(row){
            console.log(row)
        }
    },
    mounted(){
        this.showA = true
        this.showB = false
    }
}
</script>
<style scoped>
.cun:hover{
    color: blue;
}
.close:hover{
    color: blue;
}
.delemail:hover,.delemailA:hover,.xingbiao:hover{
    color: blue;
}
.el-menu-demo,.el-menu--horizontal,.el-menu{
  background-color:rgb(255, 255, 255)!important;
}
</style>